<template>
	<view class="guide">
		<swiper class="swiper" @change='swiperChange'>
			<swiper-item class="item" v-for="(item, index) in guidelList" :key="index">
				<image :src="item.src"></image>
			</swiper-item>
		</swiper>
		<view class="bottomTXT">
			<button class="cu-btn round" v-if="currentPage==guidelList.length-1" @click="goLogin">开始使用</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage:0,
				guidelList: [
					{
						src: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/guide/01.jpg'
					},{
						src: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/guide/02.jpg'
					},{
						src: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/guide/03.jpg'
					},{
						src: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/guide/04.jpg'
					}
				]
			};
		},
		onLoad() {
			this.$pub.setStorageSync('IsGuide',{time:new Date(),Boolean:false});
		},
		methods: {
			goLogin() {
				if (this.currentPage===this.guidelList.length-1) {
					this.$pub.swiTab('/pages/index/index')
				}
			},
			swiperChange(e){
				this.currentPage = e.detail.current
			}
		}
	};
</script>

<style lang="less" scoped>
	.guide {
		position: relative;
		width: 100%;
		height: 100vh;
		.swiper {
			z-index: 9998;
			width: 100%;
			height: 100vh;
			.item {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.bottomTXT{
			position: absolute;
			bottom: 60rpx;
			z-index: 9999;
			left: 50%;
			transform: translate3d(-50%, 0, 0);
			.cu-btn{
				width:400rpx;
				padding: 44rpx 0;
			}
		}
	}
	
		
</style>
